<template>
  <div class="w-table" :class="{ 'w-table_moving': dragState.dragging }"  :style="{ width: parseInt(tableWidth) + 'px' ,margin:'0 auto'}">
    <el-table
      :data="data"
      :border="option.border"
      :style="{ width: parseInt(tableWidth) + 'px' ,margin:'0 auto'}"
      :cell-class-name="cellClassName"
      :header-cell-class-name="headerCellClassName"
    >
      <slot name="fixed"></slot>
      <el-table-column
        v-for="(col, index) in tableHeader"
        :key="index"
        :prop="col.prop"
        :label="col.label"
        :width="col.minWidth"
        :min-width="col.minWidth"
        :type="col.type"
        :column-key="index.toString()"
        :render-header="renderHeader"
        show-overflow-tooltip 
        :header-align="'center'"
      >
     <template slot-scope="scope" >
       <p  v-if="col.label === '商品名称'">{{scope.row.itemName}}</p>
       <p  v-if="col.label === '商品简称'">{{scope.row.abbreviation}}</p>
       <p  v-if="col.label === '规格'" style="text-align:center;">{{scope.row.specification}}</p>
       <p  v-if="col.label === '分类'" style="text-align:center;">{{scope.row.categoryName}}</p>
       <p  v-if="col.label === '品牌'" style="text-align:center;">{{scope.row.brandName}}</p>
          <el-image
            :src="imageUrl+scope.row.resourceId"
            v-if="col.label === '图片'"
            style="height:100px;width:100px;margin:0 auto;display:block;"
          >
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </template>
      </el-table-column>
       <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="250"
      >
        <template slot-scope="scope">
          <!-- <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span> -->
          <el-button type="primary" size="small" @click="editState(scope.row.id,scope.row.state)" v-if="scope.row.state===0">上架</el-button>
          <el-button type="danger" size="small" @click="editState(scope.row.id,scope.row.state)" v-if="scope.row.state===1">下架</el-button>
          <el-button type="primary" size="small" @click="editGoods(scope.row,true)">修改</el-button>
          <el-button
            size="small"
            type="danger"
            @click="deletList(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import {imageUrl} from '@/settings'
export default {
  data() {
    return {
      imageUrl:imageUrl,
      tableHeader: [],
      dragState: {
        start: -9, // 起始元素的 index
        end: -9, // 移动鼠标时所覆盖的元素 index
        dragging: false, // 是否正在拖动
        direction: undefined, // 拖动方向
      },
         tableHeader: [
        {
          prop: "itemName",
          label: "商品名称",
          minWidth: "300",
        },
        {
          prop: "abbreviation",
          label: "商品简称",
          minWidth: "200",
        },
        {
          prop: "specification",
          label: "规格",
          minWidth: "150",
        },
         {
          prop: "categoryName",
          label: "分类",
          minWidth: "150",
        },
        {
          prop: "brandName",
          label: "品牌",
          minWidth: "150",
        },
        {
          prop: "abbreviation",
          label: "图片",
          minWidth: "150",
        },
        
    
      ],
    };
  },
  props: {
    data: {
      default: function () {
        return [];
      },
      type: Array,
    },
    header: {
      default: function () {
        return [];
      },
      type: Array,
    },
    option: {
      default: function () {
        return {};
      },
      type: Object,
    },
    // tableWidth:{
    //    default: 1161,
    //   type: Number,
    // }
  },

  computed: {
   tableWidth(){
          let num = 0;
          this.tableHeader.forEach(item=>{
              num+= parseInt(item.minWidth) 
          })
          return num+61+250
      }
  },
  created(){
    console.log(this.tableWidth);
    this.tableHeader = _.cloneDeep(this.header)
  },
  methods: {
    changeData(){
        this.tableHeader.pop()
    },
     headerCellClassName({ column, columnIndex }) {
      let active =
        columnIndex - 1 === this.dragState.end
          ? `darg_active_${this.dragState.direction}`
          : "";
      let start = columnIndex - 1 === this.dragState.start ? `darg_start` : "";
      return `${active} ${start}`;
    },

    cellClassName({ column, columnIndex }) {
      return columnIndex - 1 === this.dragState.start ? `darg_start` : "";
    },
    renderHeader(createElement, { column }) {
      return createElement(
        "div",
        {
          class: ["thead-cell"],
          on: {
            mousedown: ($event) => {
              this.handleMouseDown($event, column);
            },
            mousemove: ($event) => {
              this.handleMouseMove($event, column);
            },
          },
        },
        [
          // 添加 <a> 用于显示表头 label
          createElement("a", column.label),
          // 添加一个空标签用于显示拖动动画
          createElement("span", {
            class: ["virtual"],
          }),
        ]
      );
    },
    // 按下鼠标开始拖动
    handleMouseDown(e, column) {
      this.dragState.dragging = true;
      this.dragState.start = parseInt(column.columnKey);
      // 给拖动时的虚拟容器添加宽高
      let table = document.getElementsByClassName("w-table")[0];
      let virtual = document.getElementsByClassName("virtual");
      for (let item of virtual) {
        item.style.height = table.clientHeight - 1 + "px";
        item.style.width = item.parentElement.parentElement.clientWidth + "px";
      }
      document.addEventListener("mouseup", this.handleMouseUp);
    },

    // 鼠标放开结束拖动
    handleMouseUp() {
      this.dragColumn(this.dragState);
      // 初始化拖动状态
      this.dragState = {
        start: -9,
        end: -9,
        dragging: false,
        direction: undefined,
      };
      document.removeEventListener("mouseup", this.handleMouseUp);
    },

    // 拖动中
    handleMouseMove(e, column) {
      if (this.dragState.dragging) {
        let index = parseInt(column.columnKey); // 记录起始列
        if (index - this.dragState.start !== 0) {
          this.dragState.direction =
            index - this.dragState.start < 0 ? "left" : "right"; // 判断拖动方向
          this.dragState.end = parseInt(column.columnKey);
        } else {
          this.dragState.direction = undefined;
        }
      } else {
        return false;
      }
    },

    // 拖动易位
    dragColumn({ start, end, direction }) {
      let tempData = [];
      let left = direction === "left";
      let min = left ? end : start - 1;
      let max = left ? start + 1 : end;
      for (let i = 0; i < this.tableHeader.length; i++) {
        if (i === end) {
          tempData.push(this.tableHeader[start]);
        } else if (i > min && i < max) {
          tempData.push(this.tableHeader[left ? i - 1 : i + 1]);
        } else {
          tempData.push(this.tableHeader[i]);
        }
      }
      this.tableHeader = tempData;
      console.log(tempData);
    },
  },
};
</script>

<style lang="scss">
.w-table {
  　.el-table .darg_start {
    background-color: #f3f3f3;
  }
  .el-table th {
    padding: 0;
    .virtual {
      position: fixed;
      display: block;
      width: 0;
      height: 0;
      margin-left: -10px;
      background: none;
      border: none;
    }
    &.darg_active_left {
      .virtual {
        border-left: 2px dotted #666;
        z-index: 99;
      }
    }
    &.darg_active_right {
      .virtual {
        border-right: 2px dotted #666;
        z-index: 99;
      }
    }
  }
  .thead-cell {
    padding: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: left;
    cursor: pointer;
    overflow: initial;
    width: 100%;
    height: 40px;
    line-height: 40px;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
  }
  &.w-table_moving {
    .el-table th .thead-cell {
      cursor: move !important;
    }
    .el-table__fixed {
      cursor: not-allowed;
    }
  }
}
</style>